<template>
  <div class="qw">
    <mt-header style="background: #fff; color: #000" title="欢迎注册">
      <router-link to="/aboutme" slot="left">
        <mt-button
          style="background: #fff; color: #000"
          icon="back"
        ></mt-button>
      </router-link>
      <router-link to="/login" slot="right">
        <mt-button style="background: #fff; color: #000">登录</mt-button>
      </router-link>
    </mt-header>
    <img
      src="\img\速回收\20190315152620_97175.jpg"
      width="100%"
      height="200px"
    />
    <!-- <div slot="right"><router-link to="/">去登录</router-link></div> -->
    <mt-field
      label="用户名"
      placeholder="请输入用户名"
      v-model="userinfo.username"
    ></mt-field>
    <mt-field
      label="邮箱"
      placeholder="请输入邮箱"
      type="email"
      v-model="userinfo.email"
    ></mt-field>
    <mt-field
      label="密码"
      placeholder="请输入密码"
      type="password"
      v-model="userinfo.password"
    ></mt-field>
    <mt-field
      label="手机号"
      placeholder="请输入手机号"
      type="tel"
      v-model="userinfo.phone"
    ></mt-field>
    <button @click="register" class="btn">注册</button>
  </div>
</template>
<style lang="scss">
.qw {
  .d1 {
    background: #000;
  }
  a {
    text-decoration: none;
    color: white;
  }
  * {
    margin: 0px;
    padding: 0px;
  }
  .qw .mint-header {
    background-color: #fc5050;
    color: rgb(255, 255, 255);
    margin-top: -10px;
  }
  .mint-cell-wrapper {
    margin-bottom: 10px;
  }
  .btn {
    margin-top: 25px;
    text-align: center;
    background-color: #fc5050;
    width: 325px;
    height: 50px;
    border: #fc5050 1px solid;
    margin: 0 auto;
    margin-left: 28px;
    margin-top: 25px;
    font-size: 20px;
    color: white;
  }
}
</style>
<script>
export default {
  data() {
    return {
      userinfo: {
        username: "",
        email: "",
        password: "",
        phone: "",
      },
    };
  },
  methods: {
    register() {
      this.axios
        .post(
          "/users/reg",
          `name=${this.userinfo.username}&password=${this.userinfo.password}&mobile=${this.userinfo.phone}&email=${this.userinfo.email}`
        )
        .then((res) => {
          console.log(res.data);
          if (res.data.code == "201") {
            this.$toast({
              message: "用户名已经存在",
              position: "middle",
              duration: 5000,
            });
            for (let item in this.userinfo) {
              this.userinfo[item] = "";
            }
          } else if (res.data.code == "200") {
            this.$toast({
              message: "注册成功",
              position: "middle",
              duration: 5000,
            });
            this.$router.push("/login");
          }
        });
    },
  },
};
</script>